import { Item } from '@/types/game';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { 
  Sword, 
  Shield, 
  Gem, 
  Coffee, 
  Package,
  Star
} from 'lucide-react';

interface ItemCardProps {
  item: Item;
  quantity?: number;
  onUse?: (item: Item) => void;
  onEquip?: (item: Item) => void;
  className?: string;
  showActions?: boolean;
}

const rarityColors = {
  common: 'border-slate-500 bg-slate-700/50',
  uncommon: 'border-green-500 bg-green-900/20',
  rare: 'border-blue-500 bg-blue-900/20',
  epic: 'border-purple-500 bg-purple-900/20',
  legendary: 'border-amber-500 bg-amber-900/20'
};

const rarityTextColors = {
  common: 'text-slate-400',
  uncommon: 'text-green-400',
  rare: 'text-blue-400',
  epic: 'text-purple-400',
  legendary: 'text-amber-400'
};

const getItemIcon = (type: Item['type']) => {
  switch (type) {
    case 'weapon':
      return Sword;
    case 'armor':
      return Shield;
    case 'accessory':
      return Gem;
    case 'consumable':
      return Coffee;
    case 'material':
      return Package;
    default:
      return Package;
  }
};

const getRarityStars = (rarity: Item['rarity']) => {
  const starCount = {
    common: 1,
    uncommon: 2,
    rare: 3,
    epic: 4,
    legendary: 5
  };
  return starCount[rarity];
};

export function ItemCard({ 
  item, 
  quantity, 
  onUse, 
  onEquip, 
  className,
  showActions = true 
}: ItemCardProps) {
  const Icon = getItemIcon(item.type);
  const stars = getRarityStars(item.rarity);

  return (
    <Card className={cn(
      'relative overflow-hidden transition-all duration-200 hover:scale-105 hover:shadow-lg',
      rarityColors[item.rarity],
      className
    )}>
      <CardContent className="p-4 space-y-3">
        {/* 物品图标和数量 */}
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <div className={cn(
              'p-2 rounded-lg',
              item.rarity === 'legendary' ? 'bg-amber-500/20' :
              item.rarity === 'epic' ? 'bg-purple-500/20' :
              item.rarity === 'rare' ? 'bg-blue-500/20' :
              item.rarity === 'uncommon' ? 'bg-green-500/20' :
              'bg-slate-500/20'
            )}>
              <Icon className={cn(
                'h-6 w-6',
                rarityTextColors[item.rarity]
              )} />
            </div>
            {quantity && quantity > 1 && (
              <Badge variant="secondary" className="text-xs">
                x{quantity}
              </Badge>
            )}
          </div>
          
          {/* 稀有度星级 */}
          <div className="flex items-center space-x-1">
            {Array.from({ length: stars }).map((_, i) => (
              <Star 
                key={i} 
                className={cn(
                  'h-3 w-3 fill-current',
                  rarityTextColors[item.rarity]
                )} 
              />
            ))}
          </div>
        </div>

        {/* 物品名称 */}
        <div>
          <h4 className={cn(
            'font-semibold text-sm',
            rarityTextColors[item.rarity]
          )}>
            {item.name}
          </h4>
          <p className="text-xs text-slate-400 mt-1 line-clamp-2">
            {item.description}
          </p>
        </div>

        {/* 属性加成 */}
        {item.stats && (
          <div className="space-y-1">
            {Object.entries(item.stats).map(([stat, value]) => (
              <div key={stat} className="flex justify-between text-xs">
                <span className="text-slate-400 capitalize">
                  {stat === 'attack' ? '攻击力' :
                   stat === 'defense' ? '防御力' :
                   stat === 'health' ? '生命值' :
                   stat === 'mana' ? '灵力值' :
                   stat === 'speed' ? '速度' : stat}:
                </span>
                <span className="text-green-400">+{value}</span>
              </div>
            ))}
          </div>
        )}

        {/* 价格 */}
        <div className="flex justify-between items-center text-xs">
          <span className="text-slate-500">价值</span>
          <span className="text-amber-400">{item.price} 金币</span>
        </div>

        {/* 操作按钮 */}
        {showActions && (
          <div className="flex space-x-2">
            {item.type === 'consumable' && onUse && (
              <Button
                onClick={() => onUse(item)}
                size="sm"
                className="flex-1 bg-green-600 hover:bg-green-700 text-white"
              >
                使用
              </Button>
            )}
            
            {(item.type === 'weapon' || item.type === 'armor' || item.type === 'accessory') && onEquip && (
              <Button
                onClick={() => onEquip(item)}
                size="sm"
                className="flex-1 bg-blue-600 hover:bg-blue-700 text-white"
              >
                装备
              </Button>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  );
}